@extends('admin.base')

@section('content')
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" name="name" id="name" placeholder="请输入姓名" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" name="phone" id="phone" placeholder="请输入手机号" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" id="memberSearch">搜 索</button>
                </div>
            </div>
            <div class="layui-btn-group ">
                @can('member.member.destroy')
                    <button class="layui-btn layui-btn-danger" id="listDelete">禁 用</button>
                @endcan
                @can('member.member.create')
                    {{--<a class="layui-btn" href="{{ route('admin.member.create') }}">添加</a>--}}
                @endcan
            </div>

        </div>
        <div class="layui-card-body">
            <table id="dataTable" lay-filter="dataTable"></table>

            {{--<script type="text/html" id="options">--}}
                {{--<div class="layui-btn-group">--}}
                    {{--@can('member.member.create')--}}
                        {{--<a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>--}}
                    {{--@endcan--}}
                    {{--@can('member.member.destroy')--}}
                        {{--<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">禁用</a>--}}
                    {{--@endcan--}}
                {{--</div>--}}
            {{--</script>--}}
            <script type="text/html" id="avatar">
                {{--<a href="@{{d.avatar}}" target="_blank" title="点击查看">--}}
                    <img src="@{{d.avatar}}" alt="" width="28" height="28" class="layui-upload-img" onclick="return previewImg(this)">
                {{--</a>--}}
            </script>
            <script type="text/html" id="status">
                <input disabled type="checkbox" lay-skin="switch" lay-text="启用|禁用" @{{ d.status==1?'checked':'' }} >
            </script>
        </div>
    </div>
@endsection

@section('script')
    @can('member.member')
        <script>
            layui.use(['layer', 'table', 'form'], function () {
                var layer = layui.layer;
                var form = layui.form;
                var table = layui.table;
                //用户表格初始化
                var dataTable = table.render({
                    elem: '#dataTable'
                    , height: 500
                    , url: "{{ route('admin.member.data') }}" //数据接口
                    , where: {model: "member"}
                    , page: true //开启分页
                    , cols: [[ //表头
                        {checkbox: true, fixed: true}
                        , {field: 'id', width: 60, title: 'ID', sort: true}
                        , {field: 'name', title: '昵称', width: 100}
                        , {field: 'phone', width: 120, title: '手机'}
                        , {field: 'uuid', width: 320, title: '用户UUID'}
                        , {field: 'avatar', title: '头像', toolbar: '#avatar', width: 100}
                        , {field: 'status', title: '状态', width: 100, toolbar: "#status"}
                        , {
                            field: 'role_id', title: '用户类型', width: 100, templet: function (d) {
                                if (d.role_id == 10) {
                                    return '司机';
                                } else if(d.role_id == 20) {
                                    return '货主';
                                } else {
                                    return '普通';
                                }
                            }
                        }
                        , {field: 'created_at', title: '注册时间',  width: 180}
                        , {field: 'updated_at', title: '更新时间',  width: 180}
                        , {fixed: 'right', width: 150, align: 'center', templet: function (d) {
                            var right = '';
                            @can('member.member.create')
                            right += '<a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>';
                            @endcan
                            @can('member.member.destroy')
                            if (d.status == '1') {
                                right += '<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">禁用</a>';
                            } else {
                                right += '<a class="layui-btn layui-btn-info layui-btn-sm" lay-event="usable">启用</a>';
                            }
                            @endcan
                            return right;
                        }}
                    ]]
                });

                //监听工具条
                table.on('tool(dataTable)', function (obj) { //注：tool是工具条事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
                    var data = obj.data //获得当前行数据
                        , layEvent = obj.event; //获得 lay-event 对应的值
                    if (layEvent === 'del') {
                        layer.confirm('确认禁用吗？', function (index) {
                            $.post("{{ route('admin.member.destroy') }}", {
                                _method: 'delete',
                                ids: [data.id]
                            }, function (result) {
                                if (result.code == 0) {
                                    //obj.del(); //删除对应行（tr）的DOM结构
                                    dataTable.reload();
                                }
                                layer.close(index);
                                layer.msg(result.msg);
                            });
                        });
                    } else if (layEvent === 'edit') {
                        location.href = '/admin/member/' + data.id + '/edit';
                    } else if (layEvent === 'usable') {
                        layer.confirm('确认启用吗？', function (index) {
                            $.post("{{ route('admin.member.usable') }}", {
                                ids: [data.id]
                            }, function (result) {
                                if (result.code == 0) {
                                    dataTable.reload();
                                }
                                layer.close(index);
                                layer.msg(result.msg);
                            });
                        });
                    }
                });

                @can('member.member.edit')
                form.on('switch(isShow)', function(obj){
                    var index = layer.load();
                    var url = $(obj.elem).attr('url');
                    var data = {
                        "is_show" : obj.elem.checked==true?1:0,
                        "_method" : "put"
                    }
                    $.post(url,data,function (res) {
                        layer.close(index)
                        layer.msg(res.msg)
                    },'json');
                });
                @endcan

                //按钮批量删除
                $("#listDelete").click(function () {
                    var ids = []
                    var hasCheck = table.checkStatus('dataTable')
                    var hasCheckData = hasCheck.data;
                    if (hasCheckData.length > 0) {
                        $.each(hasCheckData, function (index, element) {
                            ids.push(element.id)
                        })
                    }
                    if (ids.length > 0) {
                        layer.confirm('确认禁用吗？', function (index) {
                            $.post("{{ route('admin.member.destroy') }}", {
                                _method: 'delete',
                                ids: ids
                            }, function (result) {
                                if (result.code == 0) {
                                    dataTable.reload();
                                }
                                layer.close(index);
                                layer.msg(result.msg)
                            });
                        })
                    } else {
                        layer.msg('请选择删除项')
                    }
                })

                //搜索
                $("#memberSearch").click(function () {
                    var userSign = $("#user_sign").val()
                    var name = $("#name").val();
                    var phone = $("#phone").val();
                    dataTable.reload({
                        where: {user_sign: userSign, name: name, phone: phone},
                        page: {curr: 1}
                    })
                })



            })
        </script>
    @endcan
@endsection



